<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字体图标的使用(font icons the use)</title>
  <link rel="stylesheet" href="./fonts03/iconfont.css">
  <!-- 
    CSS字体图标（Font Icons）是一种使用字体文件来展示图标的技术，具有矢量化、易调整颜色和大小、加载速度快等优点。
    以下是关于CSS字体图标的使用要点： 
 
      1. 引入字体文件：首先需要引入包含图标的字体文件，常用的字体图标库包括Font Awesome、Material Icons等，可以通过CDN链接或下载到本地引入。 
      2. 设置字体图标：通过给元素添加特定的CSS类名来显示字体图标，通常是在 <i> 或 <span> 等元素中添加类名，如 <i class="fas fa-home"></i> 。 
      3. 调整图标大小和颜色：可以通过设置 font-size 属性调整字体图标的大小，通过设置 color 属性调整图标的颜色，也可以利用CSS伪元素实现更多样式。 
      4. 使用Unicode编码：每个图标在字体文件中对应一个Unicode编码，可以通过设置 content 属性和 ::before 伪元素来展示字体图标，如 content: "\f015"; 。 
   -->
   <style>
     @font-face {
       font-family: "iconfont";
       src: url("./fonts03/iconfont.ttf");
     }

     .iconfont {
       font-family: "iconfont";
       font-style: normal;
     }

     .music::before {
       content: "\e664";
       font-size: 50px;
       color: red;
     }
     
   </style>
</head>
<body>
  
  <!-- 字符实体 -->
  <i class="iconfont">&#xe654;</i>
  <i class="iconfont">&#xe624;</i>

  <!-- 伪元素效果 -->
  <i class="iconfont music"></i>

  <!-- 配置引入 -->
  <i class="iconfont icon-shouye"></i>

</body>
</html>